<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctxPath}/static/layui/css/layui.css"/>
    <title>添加菜单</title>
    <script src="${ctxPath}/static/layui/layui.js"></script>
    <script src="${ctxPath}/static/js/jquery-3.6.1.min.js"></script>
    <script src="${ctxPath}/static/js/jquery.form.min.js"></script>
    <script src="https://maplemei.gitee.io/xm-select/xm-select.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title"
          style="margin-top: 20px;">
    <legend>权限分配页</legend>
</fieldset>

<form id="userForm" class="layui-form"
      action="${ctxPath}/Role/addRolePermission" method="POST" name="urForm">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width:100px;">
                角色选择
            </label>
            <div class="layui-input-inline" style="width: 300px">
                <select name="roleId" id="roleId">
                    <option value="">请选择分配权限的角色</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width:100px;">
                菜单选择
            </label>
            <div class="layui-input-inline" style="width: 300px">
                <div name="permissionS" id="permissionS"></div>
            </div>
        </div>
    </div>

    <div class="layui-form-item" style="margin-left: 20px">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn">立即提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    function reloadPage() {
        window.location = '${ctxPath}/Role/viewList';
    }

    layui.use(
        ['form', 'layedit', 'laydate'],
        function () {
            let laypage = layui.laypage //分页
                , layer = layui.layer       //弹层
                , table = layui.table       //表格
                , element = layui.element  //元素操作
                , form = layui.form;

            let per_data = [];
            $.ajax({
                url: '${ctxPath}/Option/getMenu',
                type: 'get',
                dataType: 'json',
                success: function (resp) {
                    let data = resp['data'];
                    for (let i = 0; i < data.length; i++) {
                        let obj = {}
                        obj.name = data[i].text;
                        obj.value = data[i].val;
                        per_data.push(obj);
                    }
                    let options = {
                        el: '#permissionS',
                        name: 'permissions',//表单的name属性
                        layVerify: 'required',//必填项
                        tips: '选择需要被分配权限的菜单项[多选]',
                        data: [],
                    };

                    let permissionS = xmSelect.render(options)
                    permissionS.update({data: per_data})
                    form.render();
                }
            })

            $.ajax({
                url: '${ctxPath}/Option/getRole',
                type: 'get',
                dataType: 'json',
                success: function (resp) {
                    let data = resp['data'];
                    let item = $("#roleId")
                    console.log(item);
                    for (let i = 0; i < data.length; i++) {
                        let option = document.createElement("option");
                        option.value = data[i].val;
                        option.text = data[i].text;
                        console.log(option)
                        item.append(option)
                        form.render()
                    }
                }
            })

        }
    );

    $('#userForm').ajaxForm({
        dataType: 'json',
        success: function (resp) {
            let result = resp['result'];
            if (result === "success") {
                layer.msg("权限分配成功");
                setTimeout(reloadPage, 2000);
            } else {
                let cause = resp['cause']
                layer.msg(cause);
            }
        }
    });

</script>
</body>
</html>

